<template>
  <button 
    class="btn" 
    :class="`btn--${variant}`"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    variant: {
      type: String,
      default: 'primary', // primary, secondary, danger, text
      validator: (value) => ['primary', 'secondary', 'danger', 'text'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const handleClick = (event) => {
      if (!props.disabled) {
        emit('click', event)
      }
    }
    
    return {
      handleClick
    }
  }
}
</script>

<style scoped>
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  outline: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--primary {
  background-color: #42b983;
  color: white;
}

.btn--primary:hover:not(:disabled) {
  background-color: #359c6d;
}

.btn--secondary {
  background-color: #f8f9fa;
  color: #2c3e50;
  border: 1px solid #ddd;
}

.btn--secondary:hover:not(:disabled) {
  background-color: #e9ecef;
}

.btn--danger {
  background-color: #e74c3c;
  color: white;
}

.btn--danger:hover:not(:disabled) {
  background-color: #c0392b;
}

.btn--text {
  background: none;
  color: #42b983;
  padding: 0.75rem;
}

.btn--text:hover:not(:disabled) {
  background-color: #f8f9fa;
}
</style>